<template>
  <div class="linkMange">
    <div class="head">
      <div class="head_left">
        <img class="img" src="./images/u144.svg">
        <span class="weather">晴转多云</span>
        <div class="weatherCount">
          <span class="count">21.8</span>
          ℃
        </div>
      </div>
      <div class="head_middle">桃源七里</div>
      <div class="head_right">2022-09-28  10:20:32  星期一</div>
    </div>
    <div class="content">
      <div class="column-left">
        <div class="left-box">
          <div class="left-box-title">
            <i class="icon1"></i>游客入园趋势
          </div>
          <div class="left-box-con" ref="chartRef">
            <chart-line className="join" :height="chartHeight" :visitorData="joinData" v-if="joinData.length > 0" />
          </div>
        </div>
        <div class="left-box">
          <div class="left-box-title">
            <i class="icon1"></i>近7日门票预定趋势
          </div>
          <div class="left-box-con" ref="chartRef">
            <chart-bar className="tick" :height="chartHeight" :visitorData="tickData" v-if="tickData.length > 0" />
          </div>
        </div>
        <div class="left-box">
          <div class="left-box-title">
            <i class="icon2"></i>门票预定渠道TOP5
          </div>
          <div class="left-box-con" ref="chartRef">
            <chart-prcess className="ticktop" :height="chartHeight" :visitorData="ticktopData" v-if="ticktopData.length > 0" />
          </div>
        </div>
      </div>
      <div class="column-middle">
        <div class="column-middle-top">
          <div class="top-typeContent">
            <div class="top-typeContent-row">
              <div class="rowCircle"><i class="circle1"></i></div>
              <div class="rowCount">
                <span>342343</span>
                <span class="label">今日游客数</span>
              </div>
            </div>
            <div class="top-typeContent-row">
              <div class="rowCircle"><i class="circle2"></i></div>
              <div class="rowCount">
                <span>34345</span>
                <span class="label">今日预订数</span>
              </div>
            </div>
            <div class="top-typeContent-row">
              <div class="rowCircle"><i class="circle1"></i></div>
              <div class="rowCount">
                <span>43543543</span>
                <span class="label">本月游客总数</span>
              </div>
            </div>
            <div class="top-typeContent-row">
              <div class="rowCircle"><i class="circle3"></i></div>
              <div class="rowCount">
                <span>232</span>
                <span class="label">今日人数预警次数</span>
              </div>
            </div>
          </div>
          <div class="top-typeContent-map" ref="chartmapRef">
            <chart-map className="map" :height="chartmapHeight" :visitorData="mapData" v-if="mapData.length > 0" />
          </div>
        </div>
        <div class="column-middle-bottom">
          <div class="left-box">
          <div class="left-box-title">
            <i class="icon3"></i>近7日免票人数占比
          </div>
          <div class="left-box-con" ref="chartRef">
            <chart-pie className="noticktop" :height="chartHeight" :visitorData="noticktopData" centerColor="#00FF00" v-if="noticktopData.length > 0" />
          </div>
        </div>
        <div class="left-box">
          <div class="left-box-title">
            <i class="icon3"></i>游客来源地占比
          </div>
          <div class="left-box-con" ref="chartRef">
            <chart-piedouble className="area" :visitorData="areaData" v-if="areaData.length > 0" :height="chartHeight" :otherInfo="true" />
          </div>
        </div>
        </div>
      </div>
      <div class="column-right">
        <div class="left-box">
          <div class="left-box-title">
            <i class="icon3"></i>游客年龄占比
          </div>
          <div class="left-box-con" ref="chartRef">
            <chart-pie className="years" :height="chartHeight" :visitorData="yearsData" v-if="yearsData.length > 0" />
          </div>
        </div>
        <div class="left-box">
          <div class="left-box-title">
            <i class="icon3"></i>游客画像分析
          </div>
          <div class="left-box-con" ref="chartRef" style="display: flex; justify-content: space-between;">
            <chart-piedouble className="sex" :height="chartHeight" title="性别比例" :visitorData="sexData" v-if="sexData.length > 0" />
            <chart-piedouble className="type" :height="chartHeight" title="团散比例" :visitorData="typeData" v-if="typeData.length > 0" />
          </div>
        </div>
        <div class="left-box">
          <div class="left-box-title">
            <i class="icon1"></i>省内外游客趋势
          </div>
          <div class="left-box-con" ref="chartRef">
            <chart-linedouble className="outin" :height="chartHeight" :visitorData="outinData" v-if="outinData.length > 0" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ChartLine from './components/chartLine';
import ChartBar from './components/chartBar';
import ChartPrcess from './components/chartPrcess';
import ChartPie from './components/chartPie';
import ChartPiedouble from './components/chartPiedouble';
import ChartLinedouble from './components/chartLinedouble';
import ChartMap from './components/chartMap';
import { addItemObj } from '@/api/admin/dict';
export default {
  name: "linkMange",
  components: { ChartLine, ChartBar, ChartPrcess, ChartPie, ChartPiedouble, ChartLinedouble, ChartMap },
  data() {
    return {
      chartHeight: '0px',
      chartmapHeight: '0px',
      joinData: [],
      tickData: [],
      ticktopData: [],
      noticktopData: [],
      sexData: [],
      typeData: [],
      areaData: [],
      yearsData: [],
      outinData: [],
      mapData: []
    }
  },
  mounted() {
    this.chartHeight = this.$refs.chartRef.offsetHeight + 'px'
    this.chartmapHeight = this.$refs.chartmapRef.offsetHeight + 'px'
    this.$nextTick(function () {
      this.getTickData()
      this.getTicktopData()
      this.getNoticktopData()
      this.getJoinData()
      this.getSexData()
      this.getTypeData()
      this.getAreaData()
      this.getYearsData()
      this.getOutinData()
      this.getMapData()
    })
  },
  methods: {
    getTickData() {
      this.tickData = [
        { value: 18000, name: '11-1' },
        { value: 12000, name: '11-2' },
        { value: 14500, name: '11-3' },
        { value: 7600, name: '11-4' },
        { value: 11000, name: '11-5' },
        { value: 16000, name: '11-6' },
        { value: 13200, name: '11-7' }
      ]
    },
    getTicktopData() {
      this.ticktopData = [
        { value: 6088, name: '携程' },
        { value: 5020, name: '去哪儿网' },
        { value: 4085, name: '途牛' },
        { value: 3036, name: '美团' },
        { value: 2018, name: '飞猪' }
      ]
      let total = 0
      this.ticktopData.forEach(element => {
        total += element.value
      });
      this.ticktopData.forEach(element => {
        const num = (element.value / total * 100)
        element.percent = num.toFixed(1) + '%'
      });
    },
    getNoticktopData() {
      this.noticktopData = [
        {value: 6300, name: '6周岁以下'},
        {value: 1580, name: '70周岁以上'},
        {value: 120, name: '优待人员'}
      ]
    },
    getJoinData() {
      this.joinData = [
        { value: 0, name: '0:00' },
        { value: 1000, name: '3:00' },
        { value: 2600, name: '6:00' },
        { value: 3200, name: '9:00' },
        { value: 2600, name: '12:00' },
        { value: 2000, name: '15:00' },
        { value: 1320, name: '18:00' },
        { value: 1000, name: '21:00' },
        { value: 800, name: '23:00' }
      ]
    },
    getSexData() {
      this.sexData = [
        { value: 20, name: '男性' },
        { value: 33, name: '女性' }
      ]
    },
    getTypeData() {
      this.typeData = [
        { value: 20, name: '散客' },
        { value: 53, name: '旅游团' }
      ]
    },
    getAreaData() {
      this.areaData = [
        { value: 2, name: '浙江' },
        { value: 93, name: '江苏' },
        { value: 43, name: '上海' },
        { value: 23, name: '四川' }
      ]
    },
    getYearsData() {
      this.yearsData = [
        { name: '18岁以下', value: 6000},
        { name: '18岁-29岁', value: 5000},
        { name: '30岁-39岁', value: 4000},
        { name: '40岁-49岁', value: 3000},
        { name: '50岁-59岁', value: 2000},
        { name: '60岁及以上', value: 1000}
      ]
    },
    getOutinData() {
      this.outinData = [
        { valueOut: 100, valueIn: 5600, name: '11-1' },
        { valueOut: 1800, valueIn: 1700, name: '11-2' },
        { valueOut: 5000, valueIn: 2300, name: '11-3' },
        { valueOut: 5000, valueIn: 2000, name: '11-4' },
        { valueOut: 9000, valueIn: 5000, name: '11-5' },
        { valueOut: 560, valueIn: 5678, name: '11-6' },
        { valueOut: 3456, valueIn: 678, name: '11-7' }
      ]
    },
    getMapData() {
      this.mapData = [
        {name:"北京市",value:199},
        {name:"浙江",value:42},
        {name:"四川省",value:102},
        {name:"黑龙江省",value:81},
        {name:"内蒙古自治区",value:47}
      ]
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.linkMange {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 1);
  font-family: 'ArialMT', 'Arial', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #333333;
  vertical-align: none;
  text-align: center;
  line-height: normal;
  text-transform: none;
  display: flex;
  flex-direction: column;
  .head {
    display: flex;
    height: 75px;
    .head_middle {
      width: 30%;
      background: url(images/u7096.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-width: 0px;
      font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 30px;
      color: #80FFFF;
    }
    .head_left, .head_right  {
      width: calc(35% - 24px);
      background-repeat: no-repeat;
      background-size: 100% 59px;
      background-position: bottom center;
      color: #FFFFFF;
      &.head_left {
        display: flex;
        margin-left: 24px;
        background-image: url(images/u7095.png);
        font-size: 14px;
        .img {
          width: 36px;
          height: 36px;
          margin-left: 20px;
          padding-top: 3px;
        }
        .weather {
          margin-left: 10px;
          padding-top: 15px;
        }
        .weatherCount {
          padding-top: 11px;
          padding-left: 20px;
          .count {
            font-size: 20px;
          }
        }
      }
      &.head_right {
        margin-right: 24px;
        background-image: url(images/u7097.png);
        display: flex;
        justify-content: flex-end;
        padding-top: 12px;
        padding-right: 50px;
        font-size: 16px;
      }
    }

  }
  .content {
    flex: auto;
    display: flex;
    color: #FFFFFF;
    padding: 25px 0 0;
    .column-left, .column-right {
      display: flex;
      flex-direction: column;
      width: calc(25% - 16px);
      &.column-left {
        margin-left: 16px;
      }
      &.column-right {
        margin-right: 16px;
      }
    }
    .left-box {
        display: flex;
        flex-direction: column;
        height: 33.3%;
        margin-bottom: 5px;
        background: url(images/u8578.png) no-repeat;
        background-size: 100% 100%;
        .left-box-title {
          display: flex;
          align-items: center;
          height: 40px;
          margin-top: 10px;
          background: url(images/u8579.png) no-repeat;
          background-size: 100% 100%;
          font-size: 16px;
          color: #1296DB;
        }
        .left-box-con {
          flex: auto
        }
      }
    .column-middle {
      display: flex;
      flex-direction: column;
      width: 50%;
      .column-middle-top {
        flex: auto;
        display: flex;
        flex-direction: column;
        .top-typeContent {
          display: flex;
          justify-content: center;
          padding: 0 5px;
          .top-typeContent-row {
            display: flex;
            align-items: center;
            width: 25%;
            .rowCircle {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 30%;
              max-width: 64px;
              height: 64px;
              background: url(images/u228.svg) no-repeat;
              background-size: 100% 100%;
              .circle1 {
                width: 25px;
                height: 32px;
                background: url(images/u3032.svg) no-repeat;
                background-size: 100% 100%;
              }
              .circle2 {
                width: 26px;
                height: 37px;
                background: url(images/u8809.svg) no-repeat;
                background-size: 100% 100%;
              }
              .circle3 {
                width: 32px;
                height: 32px;
                background: url(images/u5511.png) no-repeat;
                background-size: 100% 100%;
              }
            }
            .rowCount {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              margin-left: 10px;
              font-size: 20px;
              letter-spacing: 3px;
              .label {
                font-size: 16px;
                color: #3399FF;
                text-align: left;
                letter-spacing: 0px;
              }
            }
          }
        }
        .top-typeContent-map {
          flex: auto;
        }
      }
      .column-middle-bottom {
        height: calc(33.3% - 5px);
        margin-bottom: 5px;
        padding-right: 5px;
        display: flex;
        .left-box {
          width: 50%;
          height: 100%;
          margin-left: 5px;
        }
      }
    }
    .icon1, .icon2, .icon3 {
      width: 32px;
      height: 24px;
      margin-left: 20px;
      margin-right: 10px;
      background-image: url(images/u205.svg);
      background-size: 100% 100%;
      &.icon2 {
        background-image: url(images/u301.png);
      }
      &.icon3 {
        width: 26px;
        height: 26px;
        background-image: url(images/u332.svg);
      }
    }
  }
}
@media screen and (min-width: 1921px) {
}
</style>
